export const HSBCLogo = ({ className }: { className?: string }) => (
  <svg className={className} role="img" viewBox="0 0 315.9 85" xmlns="http://www.w3.org/2000/svg">
    <title>HSBC</title>
    <rect x="42.6" width="85" height="85" fill="currentColor" />
    <polygon points="170.1,42.6 127.6,0 127.6,85.1" fill="currentColor" />
    <polygon points="85.1,42.6 127.6,0 42.6,0" fill="currentColor" />
    <polygon points="0,42.6 42.6,85.1 42.6,0" fill="currentColor" />
    <polygon points="85.1,42.6 42.6,85.1 127.6,85.1" fill="currentColor" />
    <path
      d="M207.4,45.1H192v15.2h-7.7V24.7h7.7v14.6h15.4V24.7h7.7v35.6h-7.7V45.1z"
      fill="currentColor"
    />
    <path
      d="M233.7,61c-7.7,0-14-3.1-14.1-11.6h7.7c0.1,3.8,2.3,6.1,6.5,6.1c3.1,0,6.7-1.6,6.7-5.1c0-2.8-2.4-3.6-6.4-4.8l-2.6-0.7c-5.6-1.6-11.2-3.8-11.2-10.2c0-7.9,7.4-10.6,14.1-10.6c6.9,0,12.9,2.4,13,10.3h-7.7c-0.3-3.2-2.2-5.1-5.8-5.1c-2.9,0-5.7,1.5-5.7,4.7c0,2.6,2.4,3.4,7.4,5l3,0.9c6.1,1.9,10,4,10,10C248.5,57.9,240.7,61,233.7,61z"
      fill="currentColor"
    />
    <path
      d="M252.9,24.8h12.4c2.3-0.1,4.7,0,7,0.4c4.3,1,7.6,3.8,7.6,8.6c0,4.6-2.9,6.9-7.1,8c4.8,0.9,8.4,3.3,8.4,8.6c0,8.1-8,9.9-14.2,9.9h-14ZM265.3,39.6c3.4,0,6.9-0.7,6.9-4.8c0-3.7-3.2-4.7-6.4-4.7h-5.4v9.5Zm0.7,15.4c3.6,0,7.1-0.8,7.1-5.2s-3-5.2-6.7-5.2h-6.1V55Z"
      fill="currentColor"
    />
    <path
      d="M301.2,61c-11.5,0-16.6-7.3-16.6-18.2s5.7-18.8,17-18.8c7.1,0,14,3.2,14.2,11.2h-8c-0.4-3.6-2.8-5.4-6.2-5.4c-7,0-9.1,7.5-9.1,13.2c0,5.7,2.1,12.3,8.8,12.3c3.5,0,6.1-1.9,6.6-5.5h8C315.1,58,308.6,61,301.2,61z"
      fill="currentColor"
    />
  </svg>
);
